<template>
<div>
  <div style="margin-left: 20px">
    <h3>欢迎使用酒店管理系统!</h3>
  </div>
  <div class="info-dashboard">
    <div class="info-box" style="background-color: #3498DB;">
      <h3>今日入住客人数</h3>
      <p>45位</p>
    </div>
    <div class="info-box" style="background-color: #F1C40F;">
      <h3>今日入账房费</h3>
      <p>4500.00RMB</p>
    </div>
    <div class="info-box" style="background-color: #2ECC71;">
      <h3>今日预定房间数</h3>
      <p>40间</p>
    </div>
    <div class="info-box" style="background-color: #E74C3C;">
      <h3>今日使用停车位</h3>
      <p>20个</p>
    </div>
  </div>
<!--        图形报表         -->
  <div class="app-container home">
<!--              客房入住率-->
    <div class="echart-box" ref="box"></div>
<!--                   右侧 小组件                 -->
    <div class="right-box">
<!--      <p style="margin-left: 10px">最近使用</p>-->
<!--路由跳转-->
<!--        入住登记         -->
      <div>
        <router-link to="../serve/checkin">
          <i class="el-icon-edit" style="font-size: 60px"></i>
          入住登记</router-link>
      </div>
      <!--        客房预订-->
      <div>

        <router-link to="../serve/addorder">
          <i class="el-icon-phone-outline" style="font-size: 60px"></i>
          客房预订</router-link>
      </div>
      <!--        客房动态-->
      <div>

        <router-link to="../serve/roomDynamic">
          <i class="el-icon-s-promotion" style="font-size: 60px"></i>
          客房动态</router-link>
      </div>
      <!--        发票管理-->
      <div>

        <router-link to="../serve/bill">
          <i class="el-icon-chat-dot-square" style="font-size: 60px"></i>
          发票管理</router-link>
      </div>
      <!--        会员管理-->
      <div>

        <router-link to="../member/member">
          <i class="el-icon-trophy" style="font-size: 60px"></i>
          会员管理</router-link>
      </div>

<!--                第二行                -->
<!--      <p style="margin-left: 10px">常用应用</p>-->
      <!--        旅客信息-->
      <div>

        <router-link to="../serve/customer">
          <i class="el-icon-user" style="font-size: 60px"></i>
          旅客信息</router-link>
      </div>
      <!--        入住登记-->
      <div>

        <router-link to="../serve/checkin">
          <i class="el-icon-edit" style="font-size: 60px"></i>
          入住登记</router-link>
      </div>
      <!--        发票管理-->
      <div>

        <router-link to="../serve/bill">
          <i class="el-icon-chat-dot-square" style="font-size: 60px"></i>
          发票管理</router-link>
      </div>
      <!--        客房动态-->
      <div>

        <router-link to="../serve/roomDynamic">
          <i class="el-icon-s-promotion" style="font-size: 60px"></i>
          客房动态</router-link>
      </div>
      <!--        客房预定-->
      <div>

        <router-link to="/serve/addorder">
          <i class="el-icon-phone-outline" style="font-size: 60px"></i>
          客房预定</router-link>
      </div>
      <!--        会员管理-->
      <div>
        <router-link to="/member/member">
          <i class="el-icon-trophy" style="font-size: 60px"></i>
          会员管理</router-link>
      </div>
      <!--        订单管理-->
      <div>
        <router-link to="../serve/service/orders">
          <i class="el-icon-monitor" style="font-size: 60px"></i>
          订单管理</router-link>
      </div>
      <!--        商品设置-->
      <div>
        <router-link to="../room/goods">
          <i class="el-icon-sell" style="font-size: 60px"></i>
          商品设置</router-link>
      </div>
      <!--        房间设置-->
      <div>
        <router-link to="../room/index">
          <i class="el-icon-edit" style="font-size: 60px"></i>
          房间设置</router-link>
      </div>
      <!--        添加功能-->
      <div>
        <router-link to="">
          <i class="el-icon-more-outline" style="font-size: 60px"></i>
          添加功能
        </router-link>
      </div>
    </div>

<!--              今日客房情况-->
    <div class="echart-box" ref="box01"></div>

<!--                        消息公告                     -->
    <div class="right-box-xia">
      <div>
        <p style="margin: 10px; float: left">消息公告</p>
        <p style="float: right; color: #00afff; margin-left: 20px;margin-right: 20px">查看详情</p>
        <p style="float: right">全部标记已读</p>
      </div>
      <div style="clear: both">
        <p style="float: left;margin-left: 10px">所有未读消息: </p>
        <p style="color: #C03639;float: left;font-size: 18px;margin-left: 10px">20</p>
      </div>
      <div style="clear: both;margin-left: 10px">
      <div>
        <span style="width: 40px;background-color: #3498DB">消息</span>
        <span>这是一段文字!!!!!!!!!!!!</span>
      </div>
      <div>
        <span>消息</span>
        <span>这是一段文字!!!!!!!!!!!!</span>
      </div>
      <div>
        <span>消息</span>
        <span>这是一段文字!!!!!!!!!!!!</span>
      </div>
      <div>
        <span>公告</span>
        <span>这是一段文字!!!!!!!!!!!!</span>
      </div>
      <div>
        <span>公告</span>
        <span>这是一段文字!!!!!!!!!!!!</span>
      </div>
      <div>
        <span>公告</span>
        <span>这是一段文字!!!!!!!!!!!!</span>
      </div>
      <div>
      <span>消息</span>
      <span>这是一段文字!!!!!!!!!!!!</span>
    </div>
    </div>
    </div>


  </div>
</div>
</template>

<script>
  import BarChart from './dashboard/BarChart'

  export default {
  name: "Index",
  components:{
    BarChart
  },
  data() {
    return {
    };
  },
  methods: {
    chart1(){
      const chartDom = this.$refs.box;
      // const chartDom = document.getElementById('main')
      const myChart = this.$echarts.init(chartDom);   //初始化div  , 生成一个报表对象myChart
      const option = {
        title: {
          text: '客房入住率走势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入住', '退订', '入住率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '入住',
            type: 'line',
            stack: '1',
            data: [120, 132, 101, 134, 90, 230, 210, 110, 200, 200, 200],
            smooth: true
          },
          {
            name: '退订',
            type: 'line',
            stack: '2',
            data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234 ],
            smooth: true
          },
          {
            name: '入住率',
            type: 'line',
            stack: '3',
            data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154],
            smooth: true
          },
        ]
      };
      myChart.setOption(option);
    },
    chart2(){
      const chartDom01 = this.$refs.box01;
      // const chartDom = document.getElementById('main')
      const myChart01 = this.$echarts.init(chartDom01);
      // There should not be negative values in rawData
      const rawData = [
        [100, 302, 301, 334, 390, 330, 320,330, 320],
        [320, 132, 101, 134, 90, 230, 210,330, 320],
        [220, 182, 191, 234, 290, 330, 310,330, 320],
        [150, 212, 201, 154, 190, 330, 410,330, 320],
        [820, 832, 901, 934, 1290, 1330, 1320,330, 320],
        [150, 212, 201, 154, 190, 330, 410,330, 320],
        [100, 302, 301, 334, 390, 330, 320,330, 320],
      ];
      const totalData = [];
      for (let i = 0; i < rawData[0].length; ++i) {
        let sum = 0;
        for (let j = 0; j < rawData.length; ++j) {
          sum += rawData[j][i];
        }
        totalData.push(sum);
      }
      const grid = {
        left: 100,
        right: 100,
        top: 50,
        bottom: 50
      };
      const series = [
        '已入住',
        '已预定',
        '空房',
        '脏房',
      ].map((name, sid) => {
        return {
          name,
          type: 'bar',
          stack: 'total',
          barWidth: '60%',
          label: {
            show: true,
            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
          },
          data: rawData[sid].map((d, did) =>
            totalData[did] <= 0 ? 0 : d / totalData[did]
          )
        };
      });
      const option = {
        title: {
          text: '今日客房情况统计'
        },
        legend: {
          selectedMode: false
        },
        grid,
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
        },
        series
      };
      myChart01.setOption(option);
    },
  },
  mounted() {
    this.chart1();
    this.chart2();
  },
};
</script>


<style>
  .info-dashboard {
    display: flex;
    justify-content: space-around;
    padding: 20px;
  }

  .info-box {
    width: 23%;
    height: 120px;
    padding: 20px;
    border-radius: 5px;
    color: white;
    text-align: center;
  }

  .info-box h3 {
    margin: 0 0 10px 0;
  }
  .echart-box{
    width: 50%;
    height: 400px;
    border: 1px solid #5a5e66;
    border-radius: 10px;
    margin: 20px;
    float: left;
  }
  .size-icon{
    font-size: 25px;
  }

  .right-box{
    width: 39%;
    height: 400px;
    border: 1px solid #5a5e66;
    border-radius: 10px;
    float: left;
    margin: 20px;
    flex-wrap: wrap;
    display: flex;
  }
  .right-box div{
    width: 80px;
    height: 80px;
    background-color: #4AB7BD;
    margin: 15px;
    border-radius: 10px;
  }
  .right-box-xia{
    width: 39%;
    height: 400px;
    border: 1px solid #5a5e66;
    border-radius: 10px;
    float: left;
    margin: 20px;
  }
</style>

